{% extends 'base.html' %}
{% load static %}
{% load persian %}

{% block title %}گالری تصاویر - {{ site_settings.site_name|default:"خبرگزاری ایثار" }}{% endblock %}

{% block content %}
<!-- ===== استایل اختصاصی برای ۳ ستونه ===== -->
<style>
    @media (min-width: 993px) {
        .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; }
    }
    @media (max-width: 992px) and (min-width: 577px) {
        .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 576px) {
        .gallery-grid { grid-template-columns: 1fr !important; }
    }
</style>
<!-- =================================== -->

<div class="category-header">
    <h2><i class="fas fa-images"></i> گالری تصاویر</h2>
    <p>مجموعه تصاویر شهدا، ایثارگران و رویدادهای فرهنگی</p>
</div>

<div class="gallery-grid">
    {% for gallery in page_obj %}
    <div class="gallery-item">
        <a href="{% url 'gallery_detail' gallery.slug %}">
            <img src="{{ gallery.cover_image.url }}" alt="{{ gallery.title }}">
        </a>
        <div class="info">
            <h4><a href="{% url 'gallery_detail' gallery.slug %}">{{ gallery.title }}</a></h4>
            <p>{{ gallery.description|truncatewords:15 }}</p>
            <div class="meta">
                <span><i class="fas fa-calendar-alt"></i> {{ gallery.publish_time|date:"Y/m/d"|to_persian_num }}</span>
                <span><i class="fas fa-image"></i> {{ gallery.images.count|to_persian_num }} تصویر</span>
            </div>
        </div>
    </div>
    {% empty %}
    <p style="grid-column: 1 / -1; text-align: center; padding: 50px; background: #fff; border-radius: 14px; color: #6c7065;">
        <i class="fas fa-info-circle"></i> گالری برای نمایش وجود ندارد.
    </p>
    {% endfor %}
</div>

<!-- ===== صفحه‌بندی گالری ===== -->
{% if page_obj.has_other_pages %}
<div class="pagination-container">
    {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}" class="page-link"><i class="fas fa-chevron-right"></i> قبلی</a>
    {% else %}
        <span class="page-link disabled"><i class="fas fa-chevron-right"></i> قبلی</span>
    {% endif %}

    {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
            <span class="page-link active">{{ num|to_persian_num }}</span>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <a href="?page={{ num }}" class="page-link">{{ num|to_persian_num }}</a>
        {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}" class="page-link">بعدی <i class="fas fa-chevron-left"></i></a>
    {% else %}
        <span class="page-link disabled">بعدی <i class="fas fa-chevron-left"></i></span>
    {% endif %}
</div>
{% endif %}
{% endblock %}